<template>
	<view class="loading_box" v-show="is_loading">
		<view class="loading">
			<p class="text">{{ value }}</p>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		switch_loading() {
			this.$store.commit('switch_loading');
		}
	},
	mounted() {
		setTimeout(() => {
			this.$store.commit('switch_loading', {
				loading: false,
				value: 0,
				duration: 1000
			});
		}, this.duration);
	},
	//实测直接在标签属性里写  $store.state.XX  拿不到数据  所以这里通过 计算属性去监听一下
	computed: {
		duration() {
			return this.$store.state.duration;
		},
		is_loading() {
			return this.$store.state.loading;
		},
		value() {
			return this.$store.state.value;
		}
	}
};
</script>
<style lang="less">
.loading_box {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 999;
	display: block;
	box-sizing: border-box;
	pointer-events: none;
}
.loading_box .loading {
	position: fixed;
	z-index: 999;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
	max-width: 80%;
}
.loading_box .text {
	display: inline-block;
	vertical-align: middle;
	color: #fff;
	background-color: rgba(17, 17, 17, 0.7);
	padding: 10px 20px;
	border-radius: 5px;
	font-size: 32px;
	text-align: center;
	max-width: 100%;
	word-break: break-all;
	white-space: normal;
}
</style>
